<template>
  <div class="countent">
    <el-table class="table" ref="table" :data="data.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="max-width: 1600px;" header-align="center" @select="check" @select-all="checkAll">
      <template v-for="(id, index) in keys" :key="index">
        <!-- 单选 -->
        <template v-if="index == 0">
          <el-table-column type="selection" width="60"> </el-table-column>
        </template>
        <!-- 插槽 -->
        <el-table-column :prop="id" :label="label[index]" v-else-if=" status && status.includes(id)">
          <slot :name="id"></slot>
        </el-table-column>
        <el-table-column v-else-if="index == keys.length-1" label="操作">
        <slot name="btn"></slot>
      </el-table-column>
        <!-- 正常 -->
        <el-table-column v-else :prop="id" :label="label[index]" />
      </template>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" :page-size="pageSize"
      :current-page="currentPage" layout="prev, pager, next" :total="data.length" class="fenye">
    </el-pagination>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
  props: ["keys", "data", "label","status"],
  emits: ["check", "checkAll"],
  setup(props, { emit }) {
    //表格实例
    var table = ref();
    
    //单选
    var check = (select: any, row: any) => emit("check", select, row);
    //多选
    var checkAll = (select: any) => emit("checkAll", select);
    //每页几个数据
    var pageSize = 10;
    //当前页
    var currentPage = ref(1);
    //修改页码
    var handleCurrentChange = (val:any) => {
      currentPage.value = val;
    };
    return {
      //分页
      pageSize,
      currentPage,
      handleCurrentChange,
      //表格
      check,
      checkAll,
      table,
    };
  },
};
</script>
<style scoped lang="scss">
.countent {
  display: flex;
  flex-direction: column;
  align-items: center;
  .table {
    width: 100%;
    text-align: left;
    flex: 1;
    :deep(td),
    :deep(th) {
      font-weight: 400;
      border: 1px solid #eee;
      padding-left: 10px;
    }
  }

  .fenye {
    margin-top: 20px;
  }
}
</style>
